<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <!-- 需求1：收集input 框中的数据 两个 name  age  收集起来的数据添加到arr_obj -->
        <input type="text" v-model="id"><br>
        <input type="text" v-model="name"><br>
        <input type="text" v-model="age"><br>
        <button @click="addItem">收集数据</button>
        <!--使用 v-model来收集数据 -->
        <p>id:{{id}}</p>
        <p>name:{{name}}</p>
        <p>age:{{age}}</p>
        <p>{{arr_obj}}</p>
        <!-- v-model 数据是双向的
        效果就是vue中所谓数据双向绑定
        -->
        <!-- v-for -->
        <ul>
            <li v-for="(item,index) in arr_obj" :key="item.id">{{item.id}}-{{item.name}}-{{item.age}}</li>
            <!-- :key 不能重复的 唯一标识 -->
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                id:'',
                name:'',
                age:0,
                arr_obj:[
                    {
                        id:'01',
                        name:'tom',
                        age:10
                    }
                ]
            },
            methods: {
                addItem(){
                    // 将收集到的数据添加到arr_obj
                    this.arr_obj.unshift({
                        id:this.id,
                        name:this.name,
                        age:this.age
                    })
                }
            },
        })
    </script>
</body>
</html>